<template>
    <div class="custom-drag-resize" :style="style"
        :class="isActive ? 'active' : 'inactive'"
        @mousedown="bodyDown($event)">
        <slot></slot>
        <div v-for="stick in sticks"
            :key="stick"
            class="vdr-stick"
            :class="['vdr-stick-' + stick, isResizable ? '' : 'not-resizable']"
            @mousedown.stop.prevent="stickDown(stick, $event)">
        </div>
    </div>
</template>
<script>
import Mixins from './mixins'
export default {
    name: 'CustomDragResize',
    mixins: [Mixins],
    props: {
        rect: {
            type: Object,
            default: function() {
                return {}
            }
        },
        width: {
            type: [Number, String],
            default: 300,
            validator: true
        },
        height: {
            type: Number,
            default: 300,
            validator: function (val) {
                return val > 0
            }
        },
        top: {
            type: Number,
            default: 0,
            validator: function (val) {
                return val > 0
            }
        },
        left: {
            type: Number,
            default: 0,
            validator: function (val) {
                return val > 0
            }
        },
    },
    data() {
        return {
            sticks: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'],
            isResizable: true,
            isActive: true,
            stickDrag: true,
        }
    },
}
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>